<template>
	<!-- 商品详情 -->
	<view class="container">
		<!-- 轮播图 -->
		<swiper :indicator-dots="indicatorDots" :autoplay="autoplay" :indicator-color="indicatorColor" :interval="interval"
			:duration="duration" :indicator-active-color="indicatorActiveColor">
			<block v-for="(item, index) in imgs" :key='index'>
				<swiper-item>
					<image :src='item' lazy-load></image>
				</swiper-item>
			</block>
		</swiper>
		<!-- end  轮播图 -->
		<!-- 商品信息 -->
		<!-- <block wx:for="{{imgs}}" wx:key=''> -->
		<view class='prod-info'>
			<view class="tit-wrap">
				<view class="prod-tit">{{ prodName }}</view>
				<view class="col" @click='addOrCannelCollection($event)'>
					<image v-if="!isCollection" lazy-load src="../../static/icon/prod-col.png"></image>
					<image v-if="isCollection" lazy-load src="../../static/icon/prod-col-red.png"></image>
					收藏
				</view>
			</view>
			<view class="sales-p">{{ brief }}</view>
			<view class="prod-price">
				<text class="price">￥<text class="price-num">{{ defaultSku ? parsePrice(defaultSku.price)[0] : 0
				}}</text>.{{ defaultSku ? parsePrice(defaultSku.price)[1] : 0 }}</text>
				<text class="sales"></text>
			</view>
			<!-- <button class="share-icon" open-type="share">
		          <image src='../../images/icon/share.png'></image>
		          <view class="share-text">分享</view>
		        </button> -->
		</view>
		<!-- </block> -->
		<!-- end 商品信息 -->
		<!-- 领券 -->
		<view class="coupon" @click='showPopup' v-if="couponList.length">
			<view class="coupon-tit">领券</view>
			<view class="coupon-con">
				<text class="item" v-for="item in couponList" :key="item.couponId">满{{ item.cashCondition }}
					<block v-if="item.couponType == 1">减{{ item.reduceAmount }}</block>
					<block v-if="item.couponType == 2">打{{ item.couponDiscount }}折</block>
				</text>
			</view>
			<view class="num">共{{ couponList.length }}张</view>
			<view class="more">...</view>
		</view>
		<!--end 领券 -->
		<!-- 已选规格 -->
		<view class="sku" @click='showSku($event)'>
			<view class="sku-tit">已选</view>
			<view class="sku-con">{{ selectedProp.length > 0 ? selectedProp + '，' : selectedProp }}{{ prodNum }}件</view>
			<view class="more">...</view>
		</view>
		<!-- 评价 -->
		<view class='cmt-wrap'>
			<view class="cmt-tit" @click='showComment($event)'>
				<view class="cmt-t">
					评价
					<text class="cmt-good">好评{{ prodCommData.positiveRating }}%</text>
				</view>
				<view class="cmt-count">
					共{{ prodCommData.number }}条
					<text class="cmt-more"></text>
				</view>
			</view>
			<view class="cmt-cont">
				<view class="cmt-tag" @click='showComment($event)'>
					<text>全部({{ prodCommData.number }})</text>
					<text>好评({{ prodCommData.praiseNumber }})</text>
					<text>中评({{ prodCommData.secondaryNumber }})</text>
					<text>差评({{ prodCommData.negativeNumber }})</text>
					<text>有图({{ prodCommData.picNumber }})</text>
				</view>
				<view class="cmt-items">
					<view class="cmt-item" v-for="(item, index) in littleCommPage" :key="index">
						<view class="cmt-user">
							<text class="date">{{ item.recTime }}</text>
							<view class="cmt-user-info">
								<image class="user-img" lazy-load :src="item.pic"></image>
								<view class="nickname">{{ item.nickName }}</view>
								<van-rate readonly :value="item.score" @change="onChange($event)" color="#f44" />
							</view>
						</view>
						<view class="cmt-cnt">{{ item.content }}</view>
						<scroll-view class="cmt-attr" scroll-x="true" v-if="item.pics.length">
							<image :src="commPic" lazy-load v-for='(commPic, ind) in item.pics' :key='ind'></image>
						</scroll-view>
					</view>
				</view>
				<view class="cmt-more-v" v-if="prodCommPage.records.length > 2">
					<text @click='showComment($event)'>查看全部评价</text>
				</view>
			</view>
		</view>
		<!-- 商品详情 -->
		<view class="prod-detail">
			<view>
				<rich-text :nodes="content"></rich-text>
				<!-- <image src="//img14.360buyimg.com/cms/jfs/t1/25195/1/9487/388554/5c7f80a5E8b8f8f0c/46818404849d6ec6.jpg!q70.dpg" mode="widthFix"></image> -->
			</view>
		</view>
		<!-- end 商品详情 -->
		<!-- 底部按钮 -->
		<view :class="findSku ? 'cart-footer' : 'cart-footer gray'">
			<button class="btn icon" open-type="contact">
				<image src="../../static/icon/kefu.png"></image>
				客服
			</button>
			<view class="btn icon" @click='toCartPage($event)'>
				<image src="../../static/tabbar/basket.png"></image>
				购物车
				<view class='badge badge-1' v-if="totalCartNum > 0">{{ totalCartNum }}</view>
			</view>
			<view class="btn cart" @click='showSku($event)'>
				<text>加入购物车</text>
			</view>
			<view class="btn buy" @click='buyNow($event)'>
				<text>立即购买</text>
			</view>
		</view>

		<!-- end 底部按钮 -->

		<!-- 优惠券 -->
		<!-- <view class="popup-hide" wx:if="{{popupShow}}">
			    <view class="popup-box">
			      <view class="popup-tit">
			        <text>优惠券</text>
			        <text class="close" bindtap='closePopup'></text>
			      </view>
			      <view class='popup-cnt'>
			        <block wx:for="{{couponList}}" wx:key='couponId'>
			          <coupon showTimeType="{{1}}" canUse="{{true}}" item="{{item}}"></coupon>
			        </block>
			      </view>
			    </view>
			  </view> -->
		<!-- 规格弹窗 -->
		<view class="pup-sku" v-if="skuShow">
			<view class="pup-sku-main">
				<view class='pup-sku-header'>
					<image class="pup-sku-img" :src="defaultSku.pic ? defaultSku.pic : pic"></image>
					<view class="pup-sku-price" v-if="findSku">
						￥
						<text class="pup-sku-price-int">{{ parsePrice(defaultSku.price)[0] }}</text>
						.{{ parsePrice(defaultSku.price)[1] }}
					</view>
					<view class="pup-sku-price" v-if="!findSku">无货</view>
					<view class='pup-sku-prop'>
						<text>已选</text> {{ selectedProp.length > 0 ? selectedProp + '，' : selectedProp }}{{ prodNum }}件
					</view>
					<view class='close' @click='closePopup($event)'></view>
				</view>
				<view class='pup-sku-body'>
					<view class="pup-sku-area">
						<block v-for="(value, key) in skuGroup" :key='key'>
							<view class='sku-kind'>{{ key }}</view>
							<view class='sku-choose'>
								<block v-for="(item, index) in value" :key='index'>
									<text
										:class="'sku-choose-item ' + (array_contain(selectedProp, item) ? 'active' : '') + ' ' + (['dashed', ''][props_contain(allProperties, selectedPropObj, key, item, propKeys)])"
										@click='toChooseItem($event)' :data-key="key" :data-val="item">{{ item }}</text>
								</block>
							</view>
						</block>
					</view>
					<view class="pup-sku-count">
						<view class="num-wrap">
							<view class="minus" @click='onCountMinus($event)'>
								<text class="row"></text>
							</view>
							<view class="text-wrap">
								<input type="number" :value="prodNum" disabled />
							</view>
							<view class="plus" @click='onCountPlus($event)'>
								<text class="row"></text>
								<text class="col"></text>
							</view>
						</view>
						<view class="count-name">数量</view>
					</view>
				</view>
				<view :class='findSku ? "pup-sku-footer" : "pup-sku-footer gray"'>
					<view class="btn cart" @click='addToCart($event)'>加入购物车</view>
					<view class="btn buy" @click='buyNow($event)'>立即购买</view>
				</view>
			</view>
		</view>
		<!-- 评价弹窗 -->
		<!-- 评价弹窗 -->
		<view class="cmt-popup" v-if="commentShow">
			<view class="cmt-tit">
				<view class="cmt-t">
					商品评价
					<text class="cmt-good">好评度{{ prodCommData.positiveRating }}%</text>
				</view>
				<text class="close" @click='closePopup($event)'></text>
			</view>
			<view class="cmt-cont">
				<view class="cmt-tag">
					<text @click='getProdCommPage($event)' data-evaluate="-1" :class="evaluate == -1 ? 'selected' : ''">全部({{
							prodCommData.number
					}})</text>
					<text @click='getProdCommPage($event)' data-evaluate="0" :class="evaluate == 0 ? 'selected' : ''">好评({{
							prodCommData.praiseNumber
					}})</text>
					<text @click='getProdCommPage($event)' data-evaluate="1" :class="evaluate == 1 ? 'selected' : ''">中评({{
							prodCommData.secondaryNumber
					}})</text>
					<text @click='getProdCommPage($event)' data-evaluate="2" :class="evaluate == 2 ? 'selected' : ''">差评({{
							prodCommData.negativeNumber
					}})</text>
					<text @click='getProdCommPage($event)' data-evaluate="3" :class="evaluate == 3 ? 'selected' : ''">有图({{
							prodCommData.picNumber
					}})</text>
				</view>
				<view class="cmt-items">
					<view class="cmt-item" v-for="item in prodCommPage.records" :key="item.prodCommId">
						<view class="cmt-user">
							<text class="date">{{ item.recTime }}</text>
							<view class="cmt-user-info">
								<image class="user-img" :src="item.pic" lazy-load></image>
								<view class="nickname">{{ item.nickName }}</view>
								<van-rate readonly :value="item.score" @change="onChange($event)" color="#f44" />
							</view>
						</view>
						<view class="cmt-cnt">{{ item.content }}</view>
						<scroll-view class="cmt-attr" scroll-x="true" v-if="item.pics.length">
							<image :src="commPic" lazy-load v-for='(commPic, ind) in item.pics' :key='ind'></image>
						</scroll-view>
						<view class="cmt-reply" v-if="item.replyContent">
							<text class='reply-tit'>店铺回复：</text> {{ item.replyContent }}
						</view>
					</view>
				</view>
				<view class="load-more" v-if='prodCommPage.pages > prodCommPage.current'>
					<text @click='getMoreCommPage($event)'>点击加载更多</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
import { request } from '../../utils/http.js'
import { formatHtml } from '../../utils/util.js'
import { picDomain } from '@/config';
import { parsePrice, array_contain, props_contain } from '../../wxs/numbers.js'
export default {
	data() {
		return {
			shopId: 1,
			picDomain: picDomain,
			indicatorDots: true,
			indicatorColor: '#f2f2f2',
			indicatorActiveColor: '#eb2444',
			autoplay: true,
			interval: 3000,
			duration: 1000,
			prodNum: 1,
			totalCartNum: 0,
			pic: "",
			imgs: '',
			prodName: '',
			price: 0,
			content: '',
			prodId: 0,
			brief: '',
			skuId: 0,
			popupShow: false,
			// 是否获取过用户领取过的优惠券id
			loadCouponIds: false,
			skuShow: false,
			commentShow: false,
			couponList: [],
			skuList: [],
			skuGroup: {},
			findSku: true,
			defaultSku: undefined,
			selectedProp: [],
			selectedPropObj: {},
			propKeys: [],
			allProperties: [],
			prodCommData: {},
			prodCommPage: {
				current: 0,
				pages: 0,
				records: []
			},
			littleCommPage: [],
			evaluate: -1,
			isCollection: false
		}
	},
	onLoad(options) {
		this.prodId = options.prodid

		// 加载商品信息
		this.getProdInfo();
		// 加载评论数据
		this.getProdCommData();
		// 加载评论项
		this.getLittleProdComm();
		// 查看用户是否关注
		this.getCollection();
	},
	methods: {
		parsePrice,
		array_contain,
		props_contain,
		toCartPage: function () {
			uni.switchTab({
				url: '/pages/basket/basket',
			})
		},
		getCollection() {
			/**
				 * 获取是否关注信息
				 */
			uni.showLoading();
			var params = {
				url: "/p/user/collection/isCollection",
				method: "GET",
				data: {
					prodId: this.prodId
				},
				callBack: (res) => {
					this.isCollection = res;
					uni.hideLoading();
				}
			};
			request(params);
		},

		/**
		 * 添加或者取消收藏商品 
		 */
		addOrCannelCollection() {
			uni.showLoading();

			var params = {
				url: "/p/user/collection/addOrCancel",
				method: "POST",
				data: this.prodId,
				callBack: (res) => {
					this.isCollection = !this.isCollection;
					uni.hideLoading();
				}
			};
			request(params);
		},

		// 获取商品信息
		getProdInfo() {
			uni.showLoading();
			var params = {
				url: "/prod/prodInfo",
				method: "GET",
				data: {
					prodId: this.prodId,
					// userType: 0
				},
				callBack: (res) => {
					//console.log(res);
					var imgStrs = res.imgs;
					var imgs = imgStrs.split(",");
					var content = formatHtml(res.content);

					this.imgs = imgs,
						this.content = content,
						this.price = res.price,
						this.prodName = res.prodName,
						this.prodId = res.prodId,
						this.brief = res.brief,
						// skuId: res.skuId
						this.skuList = res.skuList,
						this.pic = res.pic

					// 获取优惠券
					//this.getCouponList();
					// 组装sku
					this.groupSkuProp();

					uni.hideLoading();
				}
			};
			request(params);
		},
		getProdCommData() {
			request({
				url: "/prodComm/prodCommData",
				method: "GET",
				data: {
					prodId: this.prodId,
				},
				callBack: (res) => {
					this.prodCommData = res
				}
			})
		},
		// 获取部分评论
		getLittleProdComm() {
			if (this.prodCommPage.records.length) {
				return;
			}
			this.getProdCommPage();
		},
		getMoreCommPage(e) {
			this.getProdCommPage();
		},
		// 获取分页获取评论
		getProdCommPage(e) {
			if (e) {
				if (e.currentTarget.dataset.evaluate === this.evaluate) {
					return;
				}
				this.prodCommPage = {
					current: 0,
					pages: 0,
					records: []
				};
				this.evaluate = e.currentTarget.dataset.evaluate

			}
			request({
				url: "/prodComm/prodCommPageByProd",
				method: "GET",
				data: {
					prodId: this.prodId,
					size: 10,
					current: this.prodCommPage.current + 1,
					evaluate: this.evaluate
				},
				callBack: (res) => {
					res.records.forEach(item => {
						if (item.pics) {
							item.pics = item.pics.split(',')
						}
					})
					let records = this.prodCommPage.records
					records = records.concat(res.records)
					this.prodCommPage = {
						current: res.current,
						pages: res.pages,
						records: records
					}
					// 如果商品详情中没有评论的数据，截取两条到商品详情页商品详情
					if (!this.littleCommPage.length) {
						this.littleCommPage = records.slice(0, 2)
					}
				}
			})
		},
		getCouponList() {
			request({
				url: "/coupon/listByProdId",
				method: "GET",
				data: {
					prodId: this.prodId,
					shopId: this.shopId,
				},
				callBack: (res) => {
					this.couponList = res
				}
			})
		},


		groupSkuProp: function () {
			var skuList = this.skuList;

			/**
			 * 根据skuList进行数据组装
			 */
			//当后台返回只有一个SKU时，且SKU属性值为空时，即该商品没有规格选项，该SKU直接作为默认选中SKU

			if (skuList.length == 1 && skuList[0].properties == "") {

				this.defaultSku = JSON.parse(JSON.stringify(skuList[0]))

				return;
			}

			var skuGroup = {};//所有的规格名(包含规格名下的规格值集合）对象，如 {"颜色"：["金色","银色"],"内存"：["64G","256G"]}
			var allProperties = [];//所有SKU的属性值集合，如 ["颜色:金色;内存:64GB","颜色:银色;内存:64GB"]
			var propKeys = [];//所有的规格名集合，如 ["颜色","内存"]

			for (var i = 0; i < skuList.length; i++) {

				//找到和商品价格一样的那个SKU，作为默认选中的SKU
				var defaultSku = this.defaultSku;
				var isDefault = false;

				if (!defaultSku && skuList[i].price == this.price) {
					defaultSku = JSON.parse(JSON.stringify(skuList[i]));
					isDefault = true;
					this.defaultSku = defaultSku
				}

				var properties = skuList[i].properties; //如：版本:公开版;颜色:金色;内存:64GB
				allProperties.push(properties);
				var propList = properties.split(";"); // 如：["版本:公开版","颜色:金色","内存:64GB"]

				var selectedPropObj = this.selectedPropObj;
				for (var j = 0; j < propList.length; j++) {

					var propval = propList[j].split(":"); //如 ["版本","公开版"]
					var props = skuGroup[propval[0]]; //先取出 规格名 对应的规格值数组

					//如果当前是默认选中的sku，把对应的属性值 组装到selectedProp
					if (isDefault) {
						propKeys.push(propval[0]);
						selectedPropObj[propval[0]] = propval[1];
					}

					if (props == undefined) {
						props = []; //假设还没有版本，新建个新的空数组
						props.push(propval[1]); //把 "公开版" 放进空数组
					} else {
						if (!this.array_contain(props, propval[1])) { //如果数组里面没有"公开版"
							props.push(propval[1]); //把 "公开版" 放进数组
						}
					}
					skuGroup[propval[0]] = props; //最后把数据 放回版本对应的值
				}
				this.selectedPropObj = selectedPropObj,
					this.propKeys = propKeys
			}

			this.parseSelectedObjToVals();
			this.skuGroup = skuGroup,
				this.allProperties = allProperties
		},

		//将已选的 {key:val,key2:val2}转换成 [val,val2]
		parseSelectedObjToVals: function () {
			var selectedPropObj = this.selectedPropObj;
			var selectedProperties = "";
			var selectedProp = [];
			for (var key in selectedPropObj) {
				selectedProp.push(selectedPropObj[key]);
				selectedProperties += key + ":" + selectedPropObj[key] + ";";
			}
			selectedProperties = selectedProperties.substring(0, selectedProperties.length - 1);
			this.selectedProp = selectedProp


			var findSku = false;
			for (var i = 0; i < this.skuList.length; i++) {
				if (this.skuList[i].properties == selectedProperties) {
					findSku = true;
					this.defaultSku = this.skuList[i];
					break;
				}
			}
			this.findSku = findSku
		},

		//点击选择规格
		toChooseItem: function (e) {
			var val = e.currentTarget.dataset.val;
			var key = e.currentTarget.dataset.key;
			var selectedPropObj = this.selectedPropObj;
			selectedPropObj[key] = val;
			this.selectedPropObj = selectedPropObj
			this.parseSelectedObjToVals();
		},

		//判断数组是否包含某对象
		array_contain: function (array, obj) {
			for (var i = 0; i < array.length; i++) {
				if (array[i] == obj) //如果要求数据类型也一致，这里可使用恒等号===
					return true;
			}
			return false;
		}
		,
		buyNow: function () {
			if (!this.data.findSku) {
				return;
			}
			wx.setStorageSync("orderItem", JSON.stringify({
				prodId: this.prodId,
				skuId: this.defaultSku.skuId,
				prodCount: this.prodNum,
				shopId: this.shopId
			}));
			wx.navigateTo({
				url: '/pages/submit-order/submit-order?orderEntry=1',
			})

		},

		/**
		 * 减数量
		 */
		onCountMinus: function () {
			var prodNum = this.prodNum;
			if (prodNum > 1) {
				this.prodNum -= 1;
			}
		},

		/**
		 * 加数量
		 */
		onCountPlus: function () {
			var prodNum = this.prodNum;
			if (prodNum < 1000) {
				this.prodNum += 1;
			}
		},

		/**
		 * 分享设置
		 */
		onShareAppMessage: function (res) {
			return {
				title: this.prodName,
				path: '/pages/prod/prod?prodid=' + this.prodid
			}
		},

		showPopup: function () {
			if (this.loadCouponIds) {

				this.popupShow = true
				return;
			}
			http.request({
				url: "/p/myCoupon/listCouponIds",
				method: "GET",
				data: {},
				callBack: (couponIds) => {
					var couponList = JSON.parse(JSON.stringify(this.couponList));
					console.log(couponList)

					couponList.forEach(coupon => {
						if (couponIds && couponIds.length) {
							// 领取该优惠券数量
							var couponLimit = 0;
							couponIds.forEach(couponId => {
								if (couponId == coupon.couponId) {
									couponLimit++;
								}
							});
							// 小于用户领取优惠券上限，可以领取优惠券
							if (couponLimit < coupon.limitNum) {
								coupon.canReceive = true;
							} else {
								coupon.canReceive = false;
							}
						} else {
							coupon.canReceive = true;
						}
					});

					this.couponList = couponList,
						this.popupShow = true,
						this.loadCouponIds = true

				}
			})
		},

		closePopup: function () {

			this.popupShow = false,
				this.skuShow = false,
				this.commentShow = false

		},
		showSku: function () {
			this.skuShow = true
		},
		showComment: function () {
			this.commentShow = true
		},
		addToCart: function () {
			if (!this.findSku) {
				return;
			}
			var ths = this;
			uni.showLoading({
				mask: true
			});
			var params = {
				url: "/p/shopCart/changeItem",
				method: "POST",
				data: {
					basketId: 0,
					count: this.prodNum,
					prodId: this.prodId,
					shopId: this.shopId,
					skuId: this.defaultSku.skuId
				},
				callBack: function (res) {

					ths.totalCartNum = ths.totalCartNum + ths.prodNum;

					uni.hideLoading();
					uni.showToast({
						title: "加入购物车成功",
						icon: "none"
					})
				}
			};
			request(params);
		}
	}
}
</script>

<style>
page {
	background: #f4f4f4;
	height: 100%;
}

.container {
	height: auto;
	padding-bottom: 150rpx;
}

swiper {
	height: 750rpx;
	width: 100%;
	border-bottom: 2rpx solid #f8f8f8;
}

swiper image {
	height: 750rpx;
	width: 100%;
}

/** 商品信息 */

.prod-info {
	padding: 30rpx 30rpx 0 30rpx;
	position: relative;
	background: #fff;
}

.tit-wrap {
	position: relative;
	line-height: 40rpx;
	padding-right: 104rpx;
}

.prod-tit {
	font-size: 32rpx;
	color: #333;
	padding-right: 20rpx;
}

.tit-wrap .col {
	position: absolute;
	top: 0;
	right: 0;
	width: 80rpx;
	color: #666;
	font-size: 20rpx;
	padding-left: 20rpx;
	text-align: center;
}

.tit-wrap .col image {
	display: block;
	margin: auto;
	width: 40rpx;
	height: 40rpx;
}

.tit-wrap .col::after {
	content: "";
	display: block;
	width: 1px;
	height: auto;
	background: #f1f1f1;
	position: absolute;
	top: 0;
	bottom: 5px;
	left: 0;
}

.sales-p {
	background: #fff;
	line-height: 40rpx;
	color: #999;
	font-size: 24rpx;
	margin-top: 6rpx;
	margin-right: 104rpx;
}

.prod-price {
	font-size: 30rpx;
	height: 100rpx;
	line-height: 100rpx;
}

.price {
	color: #eb2444;
	font-size: 24rpx;
	font-weight: 600;
	margin-right: 50rpx;
}

.price-num {
	font-size: 46rpx;
	font-weight: 400;
}

.sales {
	color: #999;
}

.share-icon {
	position: absolute;
	right: 50rpx;
	top: 50rpx;
	background: none;
	line-height: 40rpx;
	border: none;
	outline: none;
	box-shadow: 0;
	padding: 0;
}

.share-icon::after {
	border: none;
}

.share-icon image {
	width: 60rpx;
	height: 60rpx;
}

.share-text {
	font-size: 26rpx;
	color: #999;
	line-height: 30rpx;
}

/** end 商品信息 */

/**优惠券*/

.coupon {
	padding: 28rpx 100rpx 14rpx 100rpx;
	background: #fff;
	position: relative;
	margin-top: 20rpx;
}

.coupon .coupon-tit {
	position: absolute;
	display: inline-block;
	width: 60rpx;
	left: 20rpx;
	font-size: 22rpx;
	top: 28rpx;
	line-height: 36rpx;
	color: #999;
}

.coupon-con .item {
	position: relative;
	display: inline-block;
	vertical-align: top;
	padding: 0 18rpx;
	background: #eb2444;
	height: 36rpx;
	line-height: 36rpx;
	color: #fff;
	font-size: 22rpx;
	margin: 0 16rpx 16rpx 0;
	font-family: arial;
}

.coupon-con .item:before,
.coupon-con .item:after {
	content: "";
	display: block;
	width: 0;
	height: 0;
	position: absolute;
	top: 0;
	border: 18rpx solid transparent;
}

.coupon-con .item:before {
	left: 0;
	border-left: 4rpx solid #fff;
}

.coupon-con .item:after {
	right: 0;
	border-right: 4rpx solid #fff;
}

.coupon .num {
	position: absolute;
	right: 80rpx;
	width: 80rpx;
	top: 28rpx;
	text-align: right;
	font-size: 24rpx;
	color: #999;
	line-height: 36rpx;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	font-family: arial;
}

.more {
	position: absolute;
	right: 20rpx;
	width: 60rpx;
	top: 10rpx;
	text-align: right;
	font-size: 40rpx;
	color: #999;
	letter-spacing: 1px;
}

/* 已选 */

.sku {
	padding: 20rpx;
	background: #fff;
	margin-top: 20rpx;
	position: relative;
	line-height: 48rpx;
}

.sku-tit {
	position: absolute;
	display: inline-block;
	width: 60rpx;
	left: 20rpx;
	font-size: 22rpx;
	top: 20rpx;
	color: #999;
}

.sku-con {
	margin: 0 80rpx;
	white-space: nowrap;
	text-overflow: ellipsis;
	overflow: hidden;
	font-size: 28rpx;
	font-weight: bold;
}

/** 评价*/

.cmt-wrap {
	background: #fff;
	margin-top: 20rpx;
	position: relative;
	line-height: 48rpx;
}

.cmt-tit {
	font-size: 32rpx;
	position: relative;
	border-bottom: 1px solid #ddd;
	padding: 20rpx;
}

.cmt-t {
	width: 300rpx;
}

.cmt-good {
	color: #eb2444;
	font-size: 24rpx;
}

.cmt-count {
	position: absolute;
	right: 20rpx;
	top: 20rpx;
	font-size: 24rpx;
	color: #666;
}

.cmt-more {
	width: 20rpx;
	height: 20rpx;
	border-top: 2rpx solid #999;
	border-right: 2rpx solid #999;
	transform: rotate(45deg);
	margin-left: 10rpx;
	display: inline-block;
}

.cmt-cont {
	padding: 0 20rpx;
}

.cmt-tag {
	position: relative;
	padding: 14px 3px 0 0;
	margin: 0;
}

.cmt-tag text {
	margin: 0 10px 10px 0;
	background: #fdf0f0;
	display: inline-block;
	padding: 0 10px;
	height: 25px;
	border-radius: 3px;
	line-height: 25px;
	font-size: 12px;
	font-family: -apple-system, Helvetica, sans-serif;
	color: #666;
}

.cmt-tag text.selected {
	color: #fff;
	background: #e93b3d;
}

.cmt-item {
	position: relative;
	padding: 10px 0;
}

.cmt-item::after {
	content: "";
	height: 0;
	display: block;
	border-bottom: 1px solid #ddd;
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	right: -10px;
	border-bottom-color: #e5e5e5;
}

.cmt-user {
	line-height: 25px;
	margin-bottom: 8px;
	font-size: 12px;
}

.cmt-user-info {
	display: flex;
	align-items: center;
	width: 400rpx;
}

.cmt-user .user-img {
	width: 25px;
	height: 25px;
	border-radius: 50%;
	vertical-align: middle;
}

.cmt-user .nickname {
	margin-left: 10px;
	display: inline-block;
	color: #333;
	max-width: 8.2em;
	height: 25px;
	line-height: 27px;
}

.cmt-user .stars {
	display: flex;
	margin-left: 3px;
}

.cmt-user .stars image {
	width: 35rpx;
	height: 35rpx;
}

.cmt-user .date {
	float: right;
	color: #999;
	margin-left: -60px;
}

.cmt-cnt {
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	position: relative;
	line-height: 1.5;
	font-size: 14px;
	margin: 5px 0;
	word-break: break-all;
	max-height: 126px;
}

.cmt-attr {
	height: 85px;
	width: 100%;
	white-space: nowrap;
}

.cmt-attr .img-wrap {
	width: 85px;
	height: 85px;
	display: inline-block;
}

.cmt-attr image {
	display: inline-block;
	width: 80px;
	height: 80px;
	margin-right: 5px;
	margin-bottom: 5px;
	border-radius: 2px;
	background: #f3f3f3;
}

.cmt-more-v {
	text-align: center;
	background-color: #fff;
	font-size: 12px;
}

.cmt-more-v text {
	height: 25px;
	line-height: 25px;
	font-size: 12px;
	text-align: center;
	color: #333;
	padding: 0px 10px;
	margin: 10px 0;
	border: 1px solid #ccc;
	border-radius: 40px;
	display: inline-block;
}

/** 评价弹窗 */

.cmt-popup {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 998;
	background-color: #fff;
	padding-bottom: 98rpx;
}

.cmt-popup .cmt-cont {
	height: calc(100% - 80rpx);
	overflow: auto;
}

.cmt-popup .cmt-cnt {
	-webkit-line-clamp: 20;
	max-height: 500px;
}

.cmt-reply {
	font-size: 14px;
	border-top: 1px dashed #ddd;
	padding: 5px 0;
}

.cmt-reply .reply-tit {
	color: #eb2444;
}

.cmt-popup .load-more {
	font-size: 14px;
	padding: 20px;
	text-align: center;
	margin-bottom: 10px;
}

.cmt-popup .load-more text {
	border: 1px solid #ddd;
	padding: 5px 10px;
	border-radius: 10px;
	color: #666;
}

/** 商品详情 */

.prod-detail {
	background: #fff;
	margin-top: 20rpx;
	position: relative;
	line-height: 48rpx;
}

.det-tit {
	width: 300rpx;
}

.detail-tit {
	font-size: 32rpx;
	position: relative;
	border-bottom: 1px solid #ddd;
	padding: 20rpx;
}

.prod-detail image {
	width: 750rpx !important;
	display: block;
}

rich-text image {
	width: 100% !important;
}

img {
	width: 100% !important;
	display: block;
}

/** end 商品详情 */

/** 底部按钮 */

.cart-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	flex-direction: row nowrap;
	height: 98rpx;
	z-index: 999;
	box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
}

.cart-footer .btn {
	position: relative;
	display: flex;
	flex-grow: 1;
	justify-content: center;
	align-items: center;
	width: 0;
	background-color: #fff;
	font-size: 28rpx;
	flex-flow: column;
}

.cart-footer .btn.icon {
	flex-grow: 0;
	flex-shrink: 0;
	width: 125rpx;
	font-size: 20rpx;
	color: #666;
}

.cart-footer .btn.icon image {
	width: 50rpx;
	height: 50rpx;
}

.cart-footer .btn.cart {
	background: #584e61;
	color: #fff;
}

.cart-footer .btn.buy {
	background: #eb2444;
	color: #fff;
}

.cart-footer.gray .btn.cart,
.cart-footer.gray .btn.buy {
	background: #ddd;
}

.cart-footer .btn .badge {
	position: absolute;
	top: 20rpx;
	left: 62rpx;
	display: inline-block;
	width: 28rpx;
	height: 28rpx;
	border-radius: 14rpx;
	background-color: #eb2444;
	text-align: center;
	line-height: 28rpx;
	font-size: 18rpx;
	color: #fff;
}

.cart-footer .btn .badge-1 {
	width: 36rpx;
}

.cart-footer .btn .badge-2 {
	width: 48rpx;
	left: 52rpx;
}

/** end  底部按钮 */

/** 优惠券弹窗 **/

.popup-hide {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.3);
}

.popup-box {
	position: absolute;
	bottom: 0;
	width: 100%;
	min-height: 375px;
	max-height: 475px;
	overflow: hidden;
	background-color: #fff;
}

.popup-tit {
	position: relative;
	height: 46px;
	line-height: 46px;
	padding-left: 10px;
	font-size: 16px;
	color: #333;
	background-color: #f7f7f7;
}

.close {
	color: #aaa;
	border-radius: 12px;
	line-height: 20px;
	text-align: center;
	height: 20px;
	width: 20px;
	font-size: 18px;
	padding: 1px;
	top: 10px;
	right: 10px;
	position: absolute;
}

.close::before {
	content: "\2716";
}

.popup-cnt {
	max-height: 429px;
	overflow: auto;
	padding: 0 10px;
}

/** 规格弹窗**/

.pup-sku {
	position: fixed;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	z-index: 999;
	background-color: rgba(0, 0, 0, 0.3);
}

.pup-sku-main {
	position: absolute;
	bottom: 0;
	width: 100%;
	min-height: 375px;
	max-height: 475px;
	background-color: #fff;
}

.pup-sku-header {
	position: relative;
	line-height: 46px;
	padding-left: 10px;
	font-size: 16px;
	color: #333;
	height: 70px;
	padding: 0 0 10px 110px;
	background-color: #fff;
}

.pup-sku-img {
	position: absolute;
	left: 10px;
	top: -20px;
	border-radius: 2px;
	width: 90px;
	height: 90px;
	border: 0 none;
	vertical-align: top;
}

.pup-sku-price {
	display: inline-block;
	height: 40px;
	line-height: 40px;
	color: #e4393c;
	font-size: 10px;
}

.pup-sku-price-int {
	font-size: 16px;
}

.pup-sku-prop {
	word-break: break-all;
	font-size: 12px;
	color: #333;
	line-height: 1.4em;
	padding-right: 10px;
	overflow: hidden;
	text-overflow: ellipsis;
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
}

.pup-sku-prop text {
	color: #999;
	margin-right: 5px;
}

.pup-sku-body {
	box-sizing: border-box;
	max-height: 379px;
	padding-bottom: 100px;
	overflow: auto;
}

.pup-sku-area .sku-kind {
	font-size: 12px;
	color: #999;
	margin: 0 10px;
	height: 40px;
	line-height: 40px;
}

.pup-sku-area .sku-choose {
	overflow: hidden;
	margin-bottom: 3px;
}

.sku-choose-item {
	display: inline-block;
	padding: 0 10px;
	min-width: 20px;
	max-width: 270px;
	overflow: hidden;
	height: 30px;
	line-height: 30px;
	text-align: center;
	margin-left: 10px;
	margin-bottom: 10px;
	border-radius: 4px;
	color: #333;
	background-color: #f7f7f7;
	font-size: 14px;
	border: 1px solid #aaa;
}

.sku-choose-item.active {
	background-color: #eb2444;
	border: 1px solid #eb2444 !important;
	color: #fff;
}


.sku-choose-item.dashed {
	border: 1px dashed #aaa;
}

.pup-sku-count {
	padding: 0 10px 13px;
	font-size: 12px;
}

.pup-sku-count .count-name {
	color: #999;
	height: 31px;
	line-height: 31px;
	width: 100rpx;
}

.pup-sku-count .num-wrap {
	position: relative;
	z-index: 0;
	width: 110px;
	float: right;
	vertical-align: middle;
	display: flex;
}

.num-wrap .minus,
.num-wrap .plus {
	position: relative;
	max-width: 30px;
	min-width: 30px;
	height: 30px;
	line-height: 30px;
	background: #f7f7f7;
	text-align: center;
}

.num-wrap .minus {
	border-top-left-radius: 3px;
	border-bottom-left-radius: 3px;
}

.num-wrap .plus {
	border-top-right-radius: 3px;
	border-bottom-right-radius: 3px;
}

.num-wrap .row {
	border-radius: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -7px;
	margin-top: -1px;
	width: 14px;
	height: 2px;
	background-color: #ccc;
}

.num-wrap .col {
	border-radius: 20px;
	position: absolute;
	top: 50%;
	left: 50%;
	margin-left: -1px;
	margin-top: -7px;
	width: 2px;
	height: 14px;
	background-color: #999;
}

.pup-sku-count .text-wrap {
	position: relative;
	width: 45px;
	z-index: 0;
	margin: 0 1px;
}

.pup-sku-count .text-wrap input {
	height: 30px;
	width: 100%;
	color: #333;
	background: #fff;
	font-size: 12px;
	text-align: center;
	border: none;
	background: #f7f7f7;
}

.pup-sku-footer {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	display: flex;
	flex-direction: row nowrap;
	height: 98rpx;
	z-index: 999;
	box-shadow: 0 -1px 3px rgba(0, 0, 0, 0.05);
}

.pup-sku-footer .btn {
	position: relative;
	display: flex;
	flex-grow: 1;
	justify-content: center;
	align-items: center;
	width: 0;
	background-color: #fff;
	font-size: 28rpx;
	flex-flow: column;
}

button.btn {
	border: none;
	border-radius: 0;
	line-height: 1;
}

.pup-sku-footer .btn.cart {
	background: #584e61;
	color: #fff;
}

.pup-sku-footer .btn.buy {
	background: #eb2444;
	color: #fff;
}

.pup-sku-footer.gray .btn.cart,
.pup-sku-footer.gray .btn.buy {
	background: #ddd;
}
</style>
